<template>
  <div class="box">
      <header class="header">
         <van-nav-bar
  title="详情"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
>
  <template #title>
         <div class="iconfont icon-sousuo dds">
        <input type="text" @click="sousuo" >
      </div>
  </template>

  <template #right>
    <van-icon name="more-o" size="22"/>
      <van-popover
  v-model="showPopover"
  theme="dark"
  trigger="click"
  :actions="actions"
  placement="bottom-end"
  @select="onSelect"
  :offset="offset"
>
  <template #reference>
  </template>
</van-popover>
  </template>

</van-nav-bar>

</header>
      <div class="content"> 
          <div class="aas">
        <van-sidebar v-model="activeKey" @change="onChange">
  <van-sidebar-item :title="item" v-for="(item,i) in categorylist" :key="i" />
</van-sidebar>
</div>
       <div class="as">
        <div class="bs">
          <van-image width="80" height="80" src="https://img01.yzcdn.cn/vant/cat.jpeg" class="imgs"/>
           <van-image width="80" height="80" src="https://img01.yzcdn.cn/vant/cat.jpeg" class="imgs"/>
            <van-image width="80" height="80" src="https://img01.yzcdn.cn/vant/cat.jpeg" class="imgs"/>
             <van-image width="80" height="80" src="https://img01.yzcdn.cn/vant/cat.jpeg" class="imgs"/>
              <van-image width="80" height="80" src="https://img01.yzcdn.cn/vant/cat.jpeg" class="imgs"/>
        </div>
       </div>

 

        
      </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { NavBar } from 'vant';
import { Popover } from 'vant';
import { Sidebar, SidebarItem } from 'vant';
import {categorylist,categorybrandlist} from '@/utlis/kind'
import { Image as VanImage } from 'vant';

Vue.use(VanImage);
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Popover);
Vue.use(NavBar);
export default {
  data(){
    return{
            showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions:[
        { index: 0, text: "首页", icon: "wap-home-o" },
        { index: 2, text: "购物车", icon: "shopping-cart-o" },
        { index: 3, text: "个人中心", icon: "friends-o" },
      ],
      offset:[13,10],
      activeKey: 0,
      
      categorylist:[],

    }
  },
  computed:{
  },
  mounted(){
      categorylist().then(res=>{
        // console.log(res.data.data);
        this.categorylist=res.data.data

      })
  },
  methods:{
    onChange(index){//侧边导航栏
    console.log(this.categorylist[index]);
    categorybrandlist(this.categorylist[index]).then(res=>{
      console.log(res);  
    })
    
    },
         onSelect({ index }) {
      // Toast(action.text);
      // console.log(event);
      switch (index) {
        case 0:
          this.$router.push("/home");
          break;
        case 2:
          this.$router.push("/cart");
          break;
        case 3:
          this.$router.push("/user");
          break;

    
  }
     },
        onClickLeft(){
      this.$router.go(-1)
       this.$store.commit("seachval","")
    },
    onClickRight(){
      console.log(1);
      this.showPopover= true
    
    },
    sousuo(){
      this.$router.push("/seach")
    }
  }
  
}
</script>
<style lang='stylus' scoped>
.dds{
  width 200px
  height 32px
  background-color: white
  border-radius: 20px
  border: 1px  solid #ccc
  input{
    margin-top 1vw
    outline: none
    border: 0
  }

}
.as{
  overflow: auto
  // background-color: blue
  height 150vw
  width  78vw
  position absolute
  right 0
  bottom 0
}
.content{
  position relative
  display: flex
  flex-direction: column
}
.aas{
  flex:1
  width 22vw
  overflow auto
  // background-color: red
}
.imgs{
  margin 10px 8px
  
}
</style>
